<template>
  <a-card
    :title="t('dashboard.monitor.passRateChartTitle')"
    :bordered="false"
    :loading="loading"
  >
    <GaugeChart v-bind="chartConfig"></GaugeChart>
  </a-card>
</template>
<script lang='ts'>
import { defineComponent, ref } from "vue";
import { useI18n } from "vue-i18n";
import { GaugeChart } from "@opd/g2plot-vue";
export default defineComponent({
  name: "MonitorKpi",
  components: {
    GaugeChart,
  },
  setup() {
    const { t } = useI18n();
    const chartConfig = {
      height: 183,
      percent: 0.75,
      range: {
        color: "l(0) 0:#B8E1FF 1:#3D76DD",
      },
      startAngle: Math.PI,
      endAngle: 2 * Math.PI,
      indicator: null,
      statistic: {
        title: {
          offsetY: -36,
          style: {
            fontSize: "18px",
            color: "#4B535E",
          },
          formatter: () => "75%",
        },
        content: {
          style: {
            fontSize: "18px",
            lineHeight: "36px",
            color: "#4B535E",
          },
          formatter: () => t("dashboard.monitor.passRate"),
        },
      },
    };
    const loading = ref(true);
    setTimeout(() => {
      loading.value = false;
    }, 1500);
    return {
      t,
      chartConfig,
      loading,
    };
  },
});
</script>